<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
</head>
<body>
<h2>添加学生</h2>
<form id="addForm">
    姓名: <input type="text" name="name"><br>
    性别: <input type="text" name="sex"><br>
    年龄: <input type="number" name="age"><br>
    班级: <input type="text" name="classmate"><br>
    描述: <input type="text" name="description"><br>
    <button type="submit">添加</button>
</form>
<h2>学生列表</h2>
<button onclick="getStudents()">刷新学生列表</button>
<ul id="studentList"></ul>
<h2>更新学生信息</h2>
<form id="updateForm">
    ID: <input type="text" name="id" readonly><br>
    姓名: <input type="text" name="name"><br>
    性别: <input type="text" name="sex"><br>
    年龄: <input type="number" name="age"><br>
    班级: <input type="text" name="classmate"><br>
    描述: <input type="text" name="description"><br>
    <button type="submit">更新</button>
</form>
<script>
function getStudents() {
    fetch('http://127.0.0.1:8080/casedemo12/students1/')
        .then(response => response.json())
        .then(data => {
            const list = document.getElementById('studentList');
            list.innerHTML = '';
            data.forEach(student => {
                const item = document.createElement('li');
                item.textContent = `${student.name} (${student.age}岁),id:${student.id}`;
                item.onclick = () => loadStudent(student.id);
                const del = document.createElement('button');
                del.textContent = '删除';
                del.onclick = (e) => {
                    e.stopPropagation();
                    deleteStudent(student.id);
                };
                item.appendChild(del);
                list.appendChild(item);
            });
        });
}

function loadStudent(id) {
    fetch(`http://127.0.0.1:8080/casedemo12/students1/${id}/`)
        .then(res => res.json())
        .then(data => {
            const form = document.getElementById('updateForm');
            form.id.value = data.id;
            form.name.value = data.name;
            form.sex.value = data.sex;
            form.age.value = data.age;
            form.classmate.value = data.classmate;
            form.description.value = data.description;
        });
}

function deleteStudent(id) {
    fetch(`http://127.0.0.1:8080/casedemo12/students1/${id}/`, {
        method: 'DELETE',
    }).then(() => getStudents());
}

document.getElementById('addForm').onsubmit = function (e) {
    e.preventDefault();
    const form = e.target;
    const data = {
        name: form.name.value,
        sex: form.sex.value,
        age: parseInt(form.age.value),
        classmate: form.classmate.value,
        description: form.description.value,
    };
    fetch('http://127.0.0.1:8080/casedemo12/students1/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(() => {
        form.reset();
        getStudents();
    });
};

document.getElementById('updateForm').onsubmit = function (e) {
    e.preventDefault();
    const form = e.target;
    const id = form.id.value;
    const data = {
        name: form.name.value,
        sex: form.sex.value,
        age: parseInt(form.age.value),
        classmate: form.classmate.value,
        description: form.description.value,
    };
    fetch(`http://127.0.0.1:8080/casedemo12/students1/${id}/`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(() => {
        form.reset();
        getStudents();
    });
};
window.onload = getStudents;
</script>
</body>
</html>
